<template>
	<view class="goods-list pad">
		<view class="goods-item" v-for="(a, index) in list" :key="index">
			<navigator :url="'/mallShop/home/goodsDtl?id=' + a.goods_sku.goods_id" hover-class="none">
				<view class="goods-img-box">
					<image :src="a.goods_image" class="goods-img"  mode=""></image>
				</view>
				<view class="goods-item-title">{{ a.goods_name }}</view>
			</navigator>
			<view class="goods-action-box">
				<view class="goods-price">
					CD ￥ <text class="int">{{ a.goods_sku.goods_price.toString().split('.')[0] }}</text>.<text class="float">{{ a.goods_sku.goods_price.toString().split('.')[1] }}</text>
				</view>
				<view class="goods-cart">
					<image src="/static/images/mallShop/add_cart.png" class="icon-cart" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			goodsList:{
				type:Array,
				default:[],
			}
		},
		data(){
			return {
				list: [],
				active: 0
			}
		},
		mounted() {
			// 继承商品列表
			this.list = this.goodsList
		},
		methods:{
			
		},
		watch: {
			goodsList (a, b) {
				this.list = this.goodsList
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-item{
		width: calc(50% - 8rpx);
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 10rpx;
		margin-bottom:15rpx;
		&:nth-child(2n+1){
			float:left;
		}
		&:nth-child(2n){
			float:right;
		}
		.goods-img-box{
			width: 338rpx;
			height: 284rpx;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			.goods-img{
				width: 338rpx;
				height: 284rpx;
			}
		}
		.goods-item-title{
			display: -webkit-box;
			-webkit-line-clamp:2;
			-webkit-box-orient:vertical;
			text-overflow: ellipsis;
			height: 3em;
			line-height: 1.4;
			overflow: hidden;
			font-size: 28rpx;
			color: #333333;
			margin-top: 40rpx;
			padding:0 20rpx;
		}
		.goods-action-box{
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			padding:0 20rpx;
			.goods-price{
				color: #F13A1D;
				font-size: 26rpx;
				.int{
					font-size: 36rpx;
				}
			}
			.icon-cart{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>
